<template>
  <div class="model">
      <div class="mask" @click="changeIsShowLoginModal(false)"></div>
      <div class="loginbox">
          <!-- 关闭 -->
          <div class="close" @click="changeIsShowLoginModal(false)"></div>
          <!-- 手机/微信导航 -->
          <section class="nav">
              <a href="#" @click="isShowContent=true" :class="{active:isShowContent}">手机号码登录</a> |
              <a href="#" :class="{ active: !isShowContent }" @click="showQrCode" >微信扫码登录</a>
          </section>
          <!-- 内容部分 -->
          <div class="content">
              <div class="phoneLogin" v-show="isShowContent">
                  <div class="row">
                      <input type="text" class="ipt" placeholder="请输入手机号" v-model="phoneNumber" ref='phone'>
                  </div>
                  <div class="row">
                      <slide-verify :l="42" :r="20" :w="362" :h="140" :accuracy="10" @success="onSuccess" @fail="onFail" @refresh="onRefresh" :style="{ width: '100%' }" class="slide-box" ref="slideBlock" :slider-text="msg"></slide-verify>
                  </div>
                  <div class="row">
                      <input type="text" class="ipt" placeholder="请输入短信验证码" v-model="code">
                      <!-- <button class="btn btncode" @click="phoneFn">{{isShowCount?count+"s":"获取验证码"}}</button> -->
                      <button class="btn btncode" @click="phoneFn" v-show="!isShowCount">获取验证码</button>
                      <button class="btn btncode"  v-show="isShowCount">{{count+"s"}}</button>
                  </div>
                  <div class="row">
                      <button class="btn btnlogin" @click="submintFn">登录</button>
                  </div>
              </div>
              <div class="qrLogin" v-show="!isShowContent" id="weixin">微信内容</div>
          </div>
      </div>
  </div>
</template>

<script>
import {mapMutations,mapActions}from "vuex"
import {validatePhoneNumber} from "@/utils"
import { SendSMSAPI,PhoneReginAPI,BindPhoneAPI,UserProfilesAPI } from '../request/api'
export default {
    data(){
        return{
            isShowContent:true,
            msg: "向右滑动",
            phoneNumber:"",
            count:60,
            isShowCount: false,
            code:"",
        }
    },
    methods:{
        ...mapMutations({
        changeIsShowLoginModal:"showModal/changeIsShowLoginModal",
        changeIsLogined: "loginStatus/changeIsLogined",
        // changeIsShowToast:"showToast/changeIsShowToast"
        }),
        ...mapActions({
            asyncIsShowToast:"showToast/asyncIsShowToast",
            asyncChangeUserInfo:"userInfo/asyncChangeUserInfo"
        }),
        countdown(){
            let timer = setInterval(()=>{
                this.isShowCount = true
                this.count--
                if(this.count ==0){
                    clearInterval(timer)
                    this.count = 59;
                    this.isShowCount = false
                }
            },1000)
        },
        toVerify(){
            // 手机验证
            if(!validatePhoneNumber(this.phoneNumber)){
                // this.changeIsShowToast({
                //     show:true,
                //     msg:"请输入正确的手机号码",
                //     type:"success"
                // });
                // setTimeout(()=>{
                //     this.changeIsShowToast({
                //         show:false
                //     })
                // },1000)
                
                // 优化后
                this.asyncIsShowToast({
                    show:true,
                    msg:"请输入正确的手机号码",
                    type:"success"
                })
                this.$refs.phone.focus()
                return false
            }
            // 滑块验证
            // if(this.msg=="向右滑动" || this.msg == "再试一次"){
            //     // alert("请滑动拼图验证")
            //     // this.changeIsShowToast({
            //     //     show:true,
            //     //     msg:"滑动拼图验证码",
            //     //     typr:"danger"
            //     // })

            //     this.asyncIsShowToast({
            //         show:true,
            //         msg:"滑动拼图验证码",
            //         typr:"danger"
            //     })
            //     return false
            // }
            return true
        },
        // 手机号
        async phoneFn(){
            // 手机验证
            // let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            // 1.手机验证未通过
            // 图片滑动未通过
            if(!this.toVerify()){
                return
            }
            // 3.手机和滑动都通过
            // alert("通过了")
            let res = await SendSMSAPI({
                phone: this.phoneNumber
            })
            // 如果拦截器返回了false后面不在执行
            if(!res) return;
            alert("发送验证码成功")
            // 定时器函数
            this.countdown();
            
        },
        // 拼图成功
        onSuccess(times) {
        let ms = (times / 1000).toFixed(1);
        this.msg = "login success, 耗时 " + ms + "s";
        },
        // 拼图失败
        onFail() {
        this.onRefresh(); // 重新刷新拼图
        },
        // 拼图刷新
        onRefresh() {
        this.msg = "再试一次";
        },
        // 
        async submintFn(){
            // 1.手机通过
            // 2.图片通过
            if(!this.toVerify()){
                return
            }
            //3.手机验证通过
            if(this.code.trim() ==""){
                alert("请输入手机验证码")
                return
            }
            // 4.发起登录-请求
            // console.log(123);
            // let res = await PhoneReginAPI({
            //     verifyCode:this.code,
            //     phone:this.phoneNumber
            // })
            let uuid = localStorage.getItem("uuid")
            let res = null
            if(uuid){
                console.log("发起绑定手机号请求...");
                res = await BindPhoneAPI({
                    verifyCode:this.code,
                    phone:this.phoneNumber,
                    uuid
                })
            }else{
                console.log("发起登录请求了...");
                res = await PhoneReginAPI({
                    verifyCode:this.code,
                    phone:this.phoneNumber
                })
            }
            if(!res) return
            // 4.1
            alert("登录成功")
            // 4.2存储token在本地存储中
            localStorage.setItem("x-auth-token",res["x-auth-token"])
            // 4.3隐藏登录模态框
            this.changeIsShowLoginModal(false)
            // 4.4登录后变购物车
            // 修改vuex中的登录状态
            this.changeIsLogined(true)
            //
            localStorage.removeItem("uuid")
            //
            uuid && this.$router.push(this.$route.path)

            // let userRes = await UserProfilesAPI()
            //     if(!userRes) return;
            //     console.log("用户信息为：",userRes);

            // 更新用户信息
            this.asyncChangeUserInfo()
        },
        showQrCode() {
          this.isShowContent = false;
          //获取二维码 并展示
          // 申请微信登录二维码
          let _this = this;
          new WxLogin({
            id: "weixin",
            appid: "wx67cfaf9e3ad31a0d", // 这个appid要填死
            scope: "snsapi_login",
            // 扫码成功后重定向的接口
            redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
            // state填写编码后的url
            state: encodeURIComponent(
              window.btoa("http://127.0.0.1:8080" + _this.$route.path)
            ),
            // 调用样式文件
            href: "data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlICwuaW1wb3dlckJveCAuaW5mb3sNCiAgICBkaXNwbGF5OiBub25lOw0KfQ==",
          });
        }
    }

}
</script>

<style lang="less" scoped> 
.model{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    .mask{
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.4);
    }
    .loginbox{
        position: absolute;
        top: 200px;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0 auto;
        width: 555px;
        height: 423px;
        background: url("../assets/img/login-box-bg.png");
        .close{
            position: absolute;
            right: 60px;
            top: 15px;
            height: 22px;
            width: 22px;
            background:url("../assets/img/close.png");
            cursor: pointer;
        }
    }
    .nav{
        display: flex;
        justify-content: center;
        margin: 50px;
        color: #999;
        a{
            text-decoration: none;
            color: #999;
            padding: 0 10px;
            &.active{
                color: #000;
            }
        }
    }
    .content{
        width: 350px;
        // height: 200px;
        margin: 20px auto;
        // background-color:red;
    }
    .phoneLogin{
        .row{
            display: flex;
            margin-bottom: 20px;
        }
        .ipt{
            flex: 1;
            height: 45px;
            padding-left: 10px;
            outline: none;
        }
        .btn{
          background-color: #0a328e;
          color: #fff;
          border: none;
          line-height: 45px;
          cursor: pointer;
        }
        .btncode{
            width: 80px;
            margin-left: 10px;
        }
        .btnlogin{
            width: 100%;
            text-align: center;
        }
    }
}
/deep/.slide-box {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    canvas {
        position: absolute;
        left: 0;
        top: -120px;
        display: none;
        width: 100%;
        box-sizing: border-box;
    }
    .slide-verify-block{
        width: 85px;
        height: 136px;
    }
    .slide-verify-refresh-icon {
        top: -120px;
        display: none;
    }
    &:hover {
        canvas {
            display: block;
        }
        .slide-verify-refresh-icon {
            display: block;
        }
    }
}
#weixin{
    /* background-color: #fcf; */
    display: flex;
    justify-content: center;
    margin-top: -20px;
}
</style>